<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="renderer" content="webkit" />
<title>主页</title>
    <!--浏览器小图标-->
    <link rel="icon" href="../image/zl_favicon.ico" type="x-icon">
    <link rel="start" id="httpStr" th:href="${httpStr}" />
    <link rel="stylesheet" type="text/css" href="../plugins/bootstrap/3.3.7/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../plugins/jquery-easyui/1.8.6/themes/gray/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../plugins/jquery-easyui/1.8.6/themes/icon.css" />
    <!-- font-awesome图标字体 -->
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css" />
    
    <link rel="stylesheet" type="text/css" href="../css/zbootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../css/zeasyui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/login.css" />
    <link rel="stylesheet" type="text/css" href="../plugins/animate/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="../plugins/animate/animate.compat.css" />
    
    <script type="text/javascript" src="../plugins/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="../plugins/jquery-easyui/1.8.6/jquery.easyui.min.js"></script>
   
    <script type="text/javascript" src="../js/html5canvas/birds.js"></script>
    <script type="text/javascript" src="../plugins/jquery-other/jquery.backstretch.min.js"></script>
    <script type="text/javascript" src="../plugins/jquery.animations/js/jquery.animations.min.js"></script>
    <script type="text/javascript" src="../plugins/jquery.animations/js/jquery.animations-tile.js"></script> 
    <script type="text/javascript" src="../plugins/jquery-rstorage/1.3.2/jquery.rStorage.min.js"></script> 
    
    
    <script type="text/javascript" src="../js/zGlobal.js"></script>
    <script type="text/javascript" src="../js/zApi.js"></script>
    <script type="text/javascript" src="../js/zUtil.js"></script>
    <script type="text/javascript" src="../js/zAlert.js"></script>
    <script type="text/javascript" src="../js/zDialog.js"></script>
    <script type="text/javascript" src="../js/zForm.js"></script>

</head>
<body class="noselect main-img">
    <canvas id="login-canvas" class="canvas-index"></canvas>
    <div class="easyui-layout" data-options="fit:true">
        <div class="login-main no-tip" style="width: 550px;">
          <div class="login-content1">
          <div id="login-div" class="login-content login-section animated rotateIn" style="width: 350px;">
            <div class="login-div login-title" >
                <span></span>
                <span id="error" class="login-error"></span>
            </div>
            <div class="login-div" >
              <input id="username" class="easyui-textbox" prompt="用户名" data-options="cls:'login-input',value:'admin'" style="width:100%;" />
            </div>
            <div class="login-div" >
              <input id="password" class="easyui-textbox" prompt="密码" data-options="cls:'login-input'" style="width:100%;"/>
            </div>
            <div class="login-div hidden" >
              <input id="captcha" class="easyui-textbox" prompt="验证码" data-options="cls:'login-input'" style="width:60%;"/>
              <img id="captcha-img" class="captcha-img" style="width:39%;"></img>
            </div>
            <div class="login-div2" >
              <a href="javascript:void(0)" id="login-btn" class="btn btn-default btn-sm" >登陆</a>
              &nbsp;
              <a href="javascript:void(0)" id="reset-btn" class="btn btn-default btn-sm" >清空</a>
            </div>
          </div>
          </div>
        </div>
    </div>
    
    
    <script type="text/javascript">
    var basePath1= zGlobal['http'];
    var basePath2= zGlobal['http2'];
    basePath2 ="..";
    $(function(){
        try{
            var token = $.sessionStorage('myToken');
            if(token && token === "errortoken"){
                $.sessionStorage.remove('myToken');
            }
        }catch(b){
        }
        
         loadCaptchaImg();
         /*
          *Fullscreen background 随机背景图片设置
          *这里的数量和图片命名方式统一好
          */
         var array = [];
         var arrayIdx = ["1","3","2","4","5"];
         var imgUrl = basePath2 + "/image/login/login-idx";
         var imgType = ".jpg";
         var randomItem = arrayIdx[Math.floor(Math.random() * arrayIdx.length)];
         array.push(imgUrl + randomItem + imgType);
         for (var i = 0; i < arrayIdx.length; i++) {
             array.push(imgUrl + arrayIdx[i] + imgType);
         }
         $.backstretch(array, {
             duration : 3000,
             fade : 1750
         });
         
         /* ajax请求登录*/
         $("#login-btn").click(function () {
             $("#login-btn").addClass('disabled');
             var username = $.trim(zUtil.val("#username"));
             var password = $.trim(zUtil.val("#password"));
             var captcha = $.trim(zUtil.val("#captcha"));
             if(!password){
                 $("#error").html("请先填写登录信息");
                 $("#login-btn").removeClass("disabled");
                 return false;
             }else{
                 $("#error").html("");
             }
             
             var result = zUtil.ajaxGetCustom({url:zGlobal["http"] + "/login"
                 , data: {
                      password: password
                     }
                 , msgFlag:false
             });
             if(zCode["GLOBAL_SUCCESS"] !== zUtil.getVal(result,zConst["busCode"])){
                 $("#error").html("登录失败");
                 $("#login-btn").removeClass("disabled");
//                  loadCaptchaImg();
                 return false;
             }
             
             $('.backstretch>img').animate('tile', {
                 "duration": 1200,
                 "rows": 12,
                 "cols": 8,
                 "effect": "fadeOut flyTo flyOut",
                 "fillMode": "forwards"
             });
             
             $.sessionStorage('myToken',password);
             setTimeout(function(){
                 location.replace("./index.html");
             },1100);
       });
         
       //重置错误信息
         $("#reset-btn").click(function() {
             zUtil.val("#password",null);
             zUtil.val("#username",null);
             zUtil.val("#captcha",null);
             $("#error").html("");
             $("#login-btn").removeClass("disabled");
         });
         
         //帮助信息
         $("#login-help").click(function () {
             $("#help-div").show();
         });
         $("#help-div").click(function () {
             $("#help-div").hide();
         });
         $("#captcha-img").click(function () {
             loadCaptchaImg();
         });
     });
     
     function loadCaptchaImg(){
//         $('#captcha-img').attr("src",basePath1 + "captcha?"+new Date().getTime());
          $('#captcha-img').attr("src", basePath2 + "/image/other/test_code.png");
     }
    </script>
   <style>

    </style>
</body>
</html>